import React from 'react';
import { Editor } from '@tiptap/react';
import FontStyleSelect from './components/FontStyleSelect';
import FormatPainter from './components/FormatPainter';
import ColorPicker from './components/ColorPicker';
import TextFormatButton from './components/TextFormatButton';
import UndoRedoButton from './components/UndoRedoButton';
import ImageButton from './components/ImageButton';
import TableButton from './components/TableButton';
import FindReplaceButton from './components/FindReplaceButton';
import ExportButton from './components/ExportButton';
import HeadingSelect from './components/HeadingSelect';

interface ToolbarProps {
  editor: Editor;
  formatPainter: any;
  setFormatPainter: (value: any) => void;
}

export const Toolbar: React.FC<ToolbarProps> = ({ editor, formatPainter, setFormatPainter }) => {
  if (!editor) return null;

  return (
    <div className="editor-toolbar">
      <UndoRedoButton editor={editor} type="undo" icon="↩" title="撤销" />
      <UndoRedoButton editor={editor} type="redo" icon="↪" title="重做" />
      
      <FontStyleSelect editor={editor} type="family" />
      <FontStyleSelect editor={editor} type="size" />

       {/* 添加标题按钮 */}
       <HeadingSelect editor={editor} />
      
      <TextFormatButton editor={editor} type="bold" icon="B" title="加粗" />
      <TextFormatButton editor={editor} type="italic" icon="I" title="斜体" />
      <TextFormatButton editor={editor} type="underline" icon="U" title="下划线" />
      <TextFormatButton editor={editor} type="strike" icon="S" title="删除线" />
      
      <ColorPicker editor={editor} type="text" icon="A" title="文字颜色" />
      <ColorPicker editor={editor} type="highlight" icon="H" title="背景颜色" />
      
      <FormatPainter
        editor={editor}
        formatPainter={formatPainter}
        setFormatPainter={setFormatPainter}
      />
      
      <ImageButton editor={editor} icon="🖼" />
      <TableButton editor={editor} icon="⊞" />
      <FindReplaceButton editor={editor} icon="🔍" />
      
      <ExportButton editor={editor} type="word" icon="W" title="导出Word" />
      <ExportButton editor={editor} type="excel" icon="E" title="导出Excel" />
      <ExportButton editor={editor} type="pdf" icon="P" title="导出PDF" />
    </div>
  );
};